<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="测试"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<view class="p-30" v-if="testPaper.length>0">
				<view class="flex flex-col bg-white rounded-lg p-30">
					<text class="text-sm">{{step+1}}.{{testPaper[step].name}}</text>
				</view>
				<view class="">
					<view class="h-90 flex items-center bg-[length:100%_100%] mt-30 px-80 justify-between"
						v-for="e,i in anlistConfig" :key="i" :style="{backgroundImage:`url(${e.bg})`}"
						@click="answer=testPaper[step].anlist[i].id">
						<text class="text-sm font-bold"
							:style="{color:answer==testPaper[step].anlist[i].id&&e.color}">{{i+1}}.{{testPaper[step].anlist[i].name}}</text>
						<uni-icons type="checkbox-filled" size="20" :color="e.color"
							v-if="answer==testPaper[step].anlist[i].id"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="px-30 w-full fixed bottom-40 left-0 ">
			<view class="rounded-full h-100 flex justify-center items-center bg-[#329EFF]" @click="onStep">
				<text class="text-white text-sm">{{step+1==testPaper.length?'交卷':'下一题'}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi';
	const exapaperId = ref('')
	const anchorId = ref('')
	const testPaper = ref([])
	const answersheetId = ref()
	onLoad((option) => {
		exapaperId.value = option.id
		anchorId.value = option.anchorId
		obtainAnswerSheet()
	})
	const obtainAnswerSheet = () => {
		userApi.obtainAnswerSheet({
			"anchor.id": anchorId.value,
			"exapaper.id": exapaperId.value
		}).then(res => {
			answersheetId.value = res.data.id //考试ID
			testPaper.value = res.data.questlist
		})
	}
	const anlistConfig = [{
		bg: "/static/test/list2.png",
		color: "#329EFF",
	}, {
		bg: "/static/test/list2.png",
		color: "#329EFF",
	}, {
		bg: "/static/test/list1.png",
		color: "#FF6A29",
	}]

	const step = ref(0)
	const answer = ref(0)
	// 下一步
	const onStep = () => {
		if (answer.value === 0) {
			uni.showToast({
				icon: 'none',
				title: "请选择答案"
			})
			return
		}
		if (step.value < testPaper.value.length - 1)
			userApi.answerQuestionsAdd({
				"membersheet.id": answersheetId.value,
				"exaquest.id": testPaper.value[step.value].id,
				"exanswer.id": answer.value
			}).then(res => {
				answer.value = 0
				step.value += 1
			})
		else userApi.answerQuestionsEnd({
			id: answersheetId.value,
		}).then(res => {
			uni.showToast({
				icon: 'none',
				title: "交卷成功",
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 1000)
		})

	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>

</style>